<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css" />
    <style type="text/css">
      .container {
        padding-top: 150px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="form-inline">
        <div class="form-group">
          <select class="form-control" id="province"></select>
        </div>
        <div class="form-group">
          <select class="form-control" id="city">
            <option>请选择城市</option>
          </select>
        </div>
        <div class="form-group">
          <select class="form-control" id="area">
            <option>请选择县城</option>
          </select>
        </div>
      </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <!-- b3 -->
    <script type="text/html" id="provinceTpl">
      <option>请选择省份</option>
      {{each province}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>
    <!-- b10 -->
    <script type="text/html" id="cityTpl">
      <option>请选择城市</option>
      {{each city}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>

    <script type="text/html" id="areasTpl">
      <option>请选择县城</option>
      {{each areas}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>
    <script>
      // b2
      let province = document.getElementById('province')
      let city = document.getElementById('city')
      let area = document.getElementById('area')
      //  b1
      ajax({
        type: 'get',
        url: 'http://localhost:3000/province',
        success: function (res) {
          console.log(res)
          // b4
          let html = template('provinceTpl', { province: res })
          // b5
          province.innerHTML = html
        },
        error: function (res) {
          console.log('错误', res)
        }
      })
      // b6
      province.onchange = function () {
        // b7
        let pid = this.value
        // b12
        let html2 = template('areasTpl', { area: [] })
        area.innerHTML = html2
        // b8
        ajax({
          type: 'get',
          url: '/cities',
          data: {
            id: pid
          },
          success: function (res) {
            console.log(res)
            // b11
            let html = template('cityTpl', { city: res })
            city.innerHTML = html
          }
        })
      }

      // 县城
      city.onchange = function () {
        let cid = this.value
        ajax({
          type: 'get',
          url: '/areas',
          data: {
            id: cid
          },
          success: function (res) {
            console.log(res)
            // b11
            let html = template('areasTpl', { areas: res })
            area.innerHTML = html
          }
        })
      }
    </script>
  </body>
</html>
